<template>
	<view>
		<view class="item" v-for="(item,i) in dataList" :key="i">
			<image class="icon" :src="require('../../../../static/image/score/'+ item.icon +'.png')"></image>
			<view class="center">
				<view class="title">{{item.title}}</view>
				<view class="sign" v-if="item.signType === 1">
					<view class="sign-item" v-for="(dot, j) in item.signList" :class="'sign-item' + item.signList.length" :key="j">
						<view class="dot" :class="dot.status ? 'light' : ''"></view>
						<view class="score">+{{dot.score}}</view>
					</view>
				</view>
				<view class="sign" v-else-if="item.signType === 2"></view>
				<view class="sign" v-else-if="item.signType === 3"></view>
				<view class="desc" v-else>{{item.desc}}</view>
			</view>
			<view class="btn" :class="'btn'+item.btnType">{{item.btn}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		data () {
			return {
				dataList: [
					{ title: '蜂竞技游戏', icon: 'icon1', btn: '点击参与', btnType: 1, desc: '参与联机/训练模式赢积分', signType: 0},
					{ title: '连续签到（天）', icon: 'icon2', btn: '去签到', btnType: 1, desc: '', signType: 1, signList: [
						{score: 1, status: 1},
						{score: 2, status: 0},
						{score: 3, status: 0},
						{score: 4, status: 0},
						{score: 5, status: 0},
						{score: 6, status: 0},
						{score: 7, status: 0}
					]},
					{ title: '连续签到（周）', icon: 'icon2', btn: '未满足条件', btnType: 0, desc: '', signType: 1, signList: [
						{score: 5, status: 0},
						{score: 10, status: 0},
						{score: 15, status: 0},
						{score: 20, status: 0}
					]},
					{ title: '连续签到（月）', icon: 'icon2', btn: '未满足条件', btnType: 0, desc: '', signType: 1, signList: [
						{score: 10, status: 0},
						{score: 20, status: 0},
						{score: 30, status: 0},
						{score: 40, status: 0},
						{score: 50, status: 0},
						{score: 60, status: 0},
						{score: 70, status: 0}
					]},
					{ title: '生日贺礼', icon: 'icon3', btn: '未满足条件', btnType: 0, desc: '积分+88', signType: 0},
					{ title: '转介绍', icon: 'icon4', btn: '未满足条件', btnType: 0, desc: '积分+188', signType: 0},
					{ title: '转介绍成为会员', icon: 'icon4', btn: '未满足条件', btnType: 0, desc: '积分+1888', signType: 0},
					{ title: '购物返积分', icon: 'icon5', btn: '未满足条件', btnType: 0, desc: '获得成交价的5%等价值积分', signType: 0}
				]
			}
		}
	}
</script>

<style scoped lang="less">
	.item{
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, .15);
		border-radius: 100px 16px 16px 100px;
		height: 66px;
		padding: 0 12px;
		margin-top: 20px;
		.icon{
			width: 44px;
			height: 44px;
			margin-right: 10px;
		}
		.btn{
			width: 74px;
			height: 44px;
			border-radius: 40px 14px 14px 40px;
			color: #000;
			font-family: hzgb;
			font-size: 12px;
			display: flex;
			justify-content: center;
			align-items: center;
			&.btn1{
				background: linear-gradient(to bottom, #ffd16b, #fff497);
			}
			&.btn0{
				background: linear-gradient(to bottom, #a0a0a0, #cccccc);
			}
		}
		.center{
			flex: 1;
			color: #fff;
			margin-right: 6px;
			.title{
				font-family: hzgb;
				font-size: 14px;
				margin-bottom: 4px;
			}
			.desc{
				font-size: 10px;
			}
		}
	}
	.sign{
		display: flex;
		align-items: center;
		margin-top: 10px;
		
	}
	.sign-item{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		.dot{
			width: 10px;
			height: 10px;
			border-radius: 10px;
			background-color: #fff;
			position: relative;
			&::after{
				content: '';
				// width: 24px;
				height: 1px;
				background-color: #fff;
				display: block;
				position: absolute;
				left: 10px;
				top: 4px;
			}
			&.light{
				background: linear-gradient(to bottom, #ffd16b, #fff497);
			}
		}
		.score{
			font-size: 10px;
		}
		&:last-child .dot::after{
			display: none;
		}
	}
	.sign-item7 .dot::after{
		width: 24px;
	}
	.sign-item4 .dot::after{
		width: 44px;
	}
</style>